﻿window.addEventListener('load', function () {
    //获取左右点头的元素 
    var zuo = document.querySelector('.zuo img');
    var zuo1 = document.querySelector('.zuo1 img');
    //获取最大的盒子的元素
    var warp = document.querySelector('.warp');

    var focusWidth = warp.offsetWidth;
    //鼠标经过图片显示左右箭头
    warp.addEventListener('mouseenter', function () {
        zuo.style.display = 'block';
        zuo1.style.display = 'block';
        //鼠标触摸上面停止定时器
        clearInterval(timer);
        timer = null;//清除定时器
    });
    //鼠标离开隐藏左右箭头
    warp.addEventListener('mouseleave', function () {
        zuo.style.display = 'none';
        zuo1.style.display = 'none';
        timer = setInterval(function () {
            zuo.click();
        }, 3000)
    });

    //动态生成小圆圈，有几张图片，就生成几个小圆圈
    //获取ul里面有几张图片
    var ul = warp.querySelector('ul');
    var ol = warp.querySelector('.circle');
    //用for循环看ul里面有几张图片，然后显示对应的小圆点
    for (var i = 0; i < ul.children.length; i++) {
        //先创建一个小li
        var li = document.createElement('li');
        //记录当前小li的索引号，通过自定义属性来做
        li.setAttribute('index', i);

        //然后再把小li放到ol里面
        ol.appendChild(li);
        li.addEventListener('click', function () {
            //干掉所有人
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            //留下我自己
            this.className = 'crrent';
            //点击图片就可以拿到图片的索引号移动图片，移动的是ul
            var index = this.getAttribute('index');

            num = cir = index;
            console.log(index);
            console.log(focusWidth);
            animate(ul, -index * focusWidth);
        });
    }
    //把第一个小圆圈的背景颜色改为红色
    ol.children[0].className = 'crrent';
    //克隆第一张图片放到ul最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0;
    var cir = 0;
    //节流阀
    var flag = true;
    zuo.addEventListener('click', function () {
        if (flag) {
            flag = false;
            //如果点到最后一张，我们就把ul快速复原 left 改为0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function () {
                flag = true;
            });
            //点击右边按钮，小圆圈一起改变，可以再声明一个变量控制小圆圈的播放
            cir++;
            if (cir == ol.children.length) {
                cir = 0;
            }
            //调用函数
            circleChange();
        }
    })

    //左边按钮
    zuo1.addEventListener('click', function () {
        if (flag) {
            flag = false;
            //如果点到最后一张，我们就把ul快速复原 left 改为0
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function () {
                flag = true;
            });
            //点击右边按钮，小圆圈一起改变，可以再声明一个变量控制小圆圈的播放
            cir--;
            if (cir < 0) {
                cir = ol.children.length - 1;
            }
            //调用函数
            circleChange();
        }
    })


    //函数封装
    function circleChange() {
        //清除其余小圆圈的cir类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        //留下当前的小圆圈的cir类名
        ol.children[cir].className = 'crrent';
    }

    //轮播图自动播放功能
    //var timer = setInterval(function () {
    //    zuo.click();
    //}, 4000);
})